<template>
  <div class="px-10 py-12">
    <div
      class="px-12 py-8 lh-22 mb-10 cursor-pointer rounded-2xl text-[#14181ebf] flex items-center"
      :class="
        isActive(item.key)
          ? 'bg-primary_hover color-text_active'
          : 'hover:text-primary auto-bg-hover'
      "
      v-for="item in menus"
      @click="onClick(item)"
    >
      <i class="text-16 mr-8" :class="item.icon"></i>
      <span class="text-14">{{ item.label }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { MenuItem } from '@/store'
import { useRouter } from 'vue-router'
const props = defineProps<{ list: MenuItem[] }>()

const route = useRoute()
const router = useRouter()

const menus = computed(() => {
  return props.list.sort((a, b) => b.order - a.order)
})

const onClick = (item: MenuItem) => {
  router.push({ name: item.key })
}

const isActive = (key: string) => {
  if (route.name == key) {
    return true
  } else if (route.meta.parentKey) {
    return key == route.meta.parentKey
  }
  return false
}
</script>

<style scoped></style>
